<template>
    <div class="todo-container">
        <div class="todo-wrap">
            <TodoHeader :addTodo="addTodo"/>
            <TodoList :todos="todos" :deleteTodo="deleteTodo"/>
            <todo-footer :todos="todos" :delCompleteTodos="delCompleteTodos" :selectAllTodos="selectAllTodos"/>
        </div>
    </div>
</template>

<script>
    import TodoHeader from './componets/TodoHeader'
    import TodoList from './componets/TodoList'
    import TodoFooter from './componets/TodoFooter'

    export default {
        name: "App",
        /*初始化数据展示*/
        data(){
            return {
                /*todos:[
                    {title:'吃饭',complete:false},
                    {title:'睡觉',complete:true},
                    {title:'coding',complete:false}
                ]*/
                /*从localStorage中读取数据*/
                todos:JSON.parse(window.localStorage.getItem('todos_key') || '[]')
            }
        },
        methods:{
            /*添加*/
            addTodo(todo){
                this.todos.unshift(todo)
            },
            /*删除*/
            deleteTodo(index){
                this.todos.splice(index,1)
            },
            /*删除所有选中的todo*/
            delCompleteTodos(){
                this.todos = this.todos.filter(todo => !todo.complete)
            },
            /*全选/全不选*/
            selectAllTodos(check){
                this.todos.forEach(todo => todo.complete = check)
            }
        },
        watch:{  //监视页面
           todos:{
               deep:true,//深度监视
               handler:function (value) {
                   //将todos最新的值保存到localStorage中
                   window.localStorage.setItem('todos_key',JSON.stringify(value))
               }
           }
        },
        components:{TodoHeader,TodoList,TodoFooter}
    }
</script>

<style scoped>
    .todo-container {
        width: 600px;
        margin: 0 auto;
    }
    .todo-container .todo-wrap {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
</style>